<template>
  <div class="app-container calendar-list-container">
    <el-row :gutter="10">
      <el-col :md="12">
        <div class="grid-content">
          <h1>部门</h1>
          <el-button type="primary"
                     @click.native="showAddDepPrompt"
                     style="margin-bottom: 10px;">增加一级部门</el-button>
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
          </el-input>

          <!-- :expand-on-click-node="false" 禁止node的click展开/收起tree -->
          <el-tree
            :data="depList"
            :props="depProps"
            @node-click="handleDepNodeClick"
            :filter-node-method="filterNode"
            :render-content="renderContent" ref="depTree"></el-tree>
        </div>
      </el-col>
      <el-col :md="12">
        <div class="grid-content">
          <h1>部门员工</h1>
          <!--<el-tree :data="members" :props="mebProps" @node-click=""></el-tree>-->
          <span v-if="members.length <= 0">无成员</span>
          <span v-if="members.length > 0" v-for="item in members">{{item.member_name}}</span>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import { getDeptInfo, getSubDeps, getMemberInfo, createDepartment, depDelete } from '@/api/enterprise/company'
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        depProps:{
          label:'dep_name',
          children: 'deps'
        },
        depList:[],
        members:[],
        filterText:''
      };
    },
    computed:mapGetters([
      'chosenCompany'
    ]),
    watch: {
      filterText(val) {
        this.$refs.depTree.filter(val);
      }
    },
    created(){
      if(this.chosenCompany){
        this.getDeps()
      }
    },
    methods: {
      handleDepNodeClick(data) {
        this.getDepAndMeb(data.dep_id);
      },
      getDepAndMeb(id){
        if(!this.chosenCompany.company_id){
          return
        }
        const requestData = {
          company_id:this.chosenCompany.company_id,
          dep_id:id
        }
        getDeptInfo(requestData).then(res => {
          this.members = res.memberInfos;
        }).catch(error=>{
          this.$message.error('获取部门人员信息失败!');
          console.log(error);
        })
      },
      getDeps(){
        let reqData = {
          client_type:1,
          company_id:this.chosenCompany.company_id
        }

        getSubDeps(reqData)
          .then(res => {
            this.depList = res.deps;
            console.log(JSON.stringify(this.depList));
          })
          .catch(err => {
            this.$message.error('获取公司部门信息失败!');
            console.log(error);
          })
      },
      getMemberInfo(id){
        let reqData = {
          client_type:1,
          company_id:this.chosenCompany.company_id,
          member_id:id
        }

        getMemberInfo(reqData)
          .then(res => {
            console.log(res);
            this.members = res
          })
          .catch(err => {
            this.$message.error('获取部门成员信息失败!');
            console.log(err);
          })
      },
      showAddDepPrompt(){//因为传参的问题这个方法是增加一级部门
        this.$prompt('请输入部门名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          this.addDep(value,null)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      showAddDep(data, event){//因为传参的问题这个方法是增加 子部门的子部门
        event.stopPropagation()

        this.$prompt('请输入部门名称', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消'
        }).then(({ value }) => {
          this.addDep(value,data.dep_id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });
        });
      },
      showDelDep(data, event){
        event.stopPropagation()
        this.$confirm('此操作将永久删除该部门, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.delDep(data.dep_id)
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      addDep(name,id) {
        let reqData = {
          company_id:this.chosenCompany.company_id,
          dep_name:name,
          upper_id:id
        }

        createDepartment(reqData)
          .then(res => {
            this.getDeps()
            this.$message({
              type: 'success',
              message: '添加成功!'
            });
          })
          .catch(err => {
            console.log(err);
            this.$message.error('添加失败!');
          })
      },
      delDep(id) {
        let reqData = {
          company_id:this.chosenCompany.company_id,
          dep_id:[id]
        }

        depDelete(reqData)
          .then(res => {
            this.getDeps()
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
          })
          .catch(err => {
            console.log(err);
            this.$message.error('删除失败!');
          })
      },
      renderContent(h, { node, data, store }) {
        return (
          <span>
          <span>
          <span>{node.label}</span>
        </span>
        <span style="float: right; margin-right: 20px">
          <el-button size="mini" on-click={ () => this.showAddDep(data, event) }>增加子部门</el-button>
        <el-button size="mini" on-click={ () => this.showDelDep(data, event) }>删除部门</el-button>
        </span>
        </span>);
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.dep_name.indexOf(value) !== -1;
      }
    }/*,
    beforeRouteLeave(to,from,next){//如果不想缓存当前页面就销毁
      this.$destroy()
      next()
    }*/
  };
</script>

<style lang="scss">
  .el-col {
    /*border: 1px solid red;*/
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>
